<body>
  <div id="container"></div>
  <script type="text/javascript" src="../three/build/three.js"></script>

  <script>
    var container;
    var camera, scene, planeMesh, renderer;
    var uniforms = {
      u_resolution: {
        type: "v2",
        value: new THREE.Vector2()
      },
      radius: {
        type: "f",
        value: 0.5
      },
      u_time: {
        type: "f",
        value: 0.5
      }
    };
    var vertexShader = `
    attribute vec3 position;
    void main() {
      gl_Position = vec4( position, 1.0 );
    }
    `
    var fragmentShader = `
    #ifdef GL_ES
    precision mediump float;
    #endif
    uniform vec2 u_resolution;
    uniform float u_time;
    uniform float radius;

    
    void main( void ) {
      vec2 uv = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;
      vec2 center = vec2(.0,.0);
      float dist = distance(center,uv);

      float angularVelocity = 12.0;//角速度
      float frequency = 12.0;//频率
      float amplitude = 0.05;//振幅
      float offset = -0.5;//偏距
      float initialPhase = frequency * u_time;//初相位
      float y = amplitude * sin((angularVelocity*uv.x)+initialPhase)+offset;//波浪函数
 
      if(y < 1.0){
        y += u_time/10.0;
      }
      if(dist < radius){//在圆内
        if(uv.y < y){//波浪以下部分着色
          gl_FragColor = vec4(0.1,0.6,0.9,1.0);
        }else{
          gl_FragColor = vec4(0.1,0.2,0.3,.6);
        }
      }
   
        
    }
    `

    init();
    animate();

    function init() {
      container = document.getElementById('container');

      camera = new THREE.Camera();

      scene = new THREE.Scene();


      var geometry = new THREE.PlaneBufferGeometry(2, 2);

      var material = new THREE.RawShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
      });

      planeMesh = new THREE.Mesh(geometry, material);


      scene.add(planeMesh);


      renderer = new THREE.WebGLRenderer();
      renderer.setSize(800, 800); //设置窗口大小800px*800px

      container.appendChild(renderer.domElement);
      uniforms.u_resolution.value.x = renderer.domElement.width;
      uniforms.u_resolution.value.y = renderer.domElement.height;

    }


    function animate() {
      requestAnimationFrame(animate);

      planeMesh.material.uniforms.u_time.value += 0.02;
      if (planeMesh.material.uniforms.u_time.value > 10.0) {
        planeMesh.material.uniforms.u_time.value = 0.0
      }

      renderer.render(scene, camera);
    }
  </script>
</body>